<template>
    <view>
    {{ formatTime }}
    </view>
</template>

<script setup>
import { ref, onBeforeUnmount, watch } from "vue";

let formatTime = ref(''); //格式化后的时间


const props = defineProps(['interval', 'totalTime', 'onFinish'])


watch(() => props.totalTime, (newVal) => {
    totalTime = newVal;
    stopCountDown()
    startCountDown()
})


//格式化
/**
 * t: 时间
 * type: 显示类型; 0: :; 1: 小时分钟秒
*/
const secondToTimeStr = (t, type) => {
    let timeStr1 = '', timeStr2 = '', timeStr3 = '';
    if (type == 0) {
        timeStr1 = ':'; timeStr2 = ':'; timeStr3 = ':';
    }else if (type == 1) {
        timeStr1 = '小时'; timeStr2 = '分'; timeStr3 = '秒'
    };
    
    if (!t) return '';
    if (t < 60) return "" + ((i = t) < 10 ? "0" + i : i);
    if (t < 3600) return "" + ((a = parseInt(`${t / 60}`)) < 10 ? "0" + a : a) + timeStr2 + ((i = t % 60) < 10 ? "0" + i : i);
    if (3600 <= t) {
        var a, i, e = parseInt(`${t / 3600}`);
        if (type == 0) {
            return (e < 10 ? "0" + e : e) + timeStr1 + ((a = parseInt(`${t % 3600 / 60}`)) < 10 ? "0" + a : a) + timeStr2 + ((i = t % 60) < 10 ? "0" + i : i);
        } else if (type == 1) {
            return (e < 10 ? "0" + e : e) + timeStr1 + ((a = parseInt(`${t % 3600 / 60}`)) < 10 ? "0" + a : a) + timeStr2 + ((i = t % 60) < 10 ? "0" + i : i) + timeStr3;
        }
        return ''
    }
    return ''
}


//时间间隔
const interval = props.interval;
//总时间
let totalTime = props.totalTime
//用来计次数
let count = 0
//开始倒计时的时间
let firstTimer = new Date().getTime();
let timer;

// 倒计时回调
const func = () => {
    count++
    let delaytimer = new Date().getTime() - (interval * count + firstTimer)

    let nextTimer = interval - delaytimer
    if (nextTimer < 0) {
        nextTimer = 0
    }
    totalTime -= interval / 1000;
    formatTime.value = secondToTimeStr(totalTime, 0);
    if (totalTime <= 0) {
        formatTime.value = "0";
        props.onFinish()
        clearTimeout(timer)
    } else {
        timer = setTimeout(func, nextTimer)
    }
}




//暂停倒计时
const stopCountDown = () => {
    clearTimeout(timer)
}

//开始倒计时
const startCountDown = () => {
    if (totalTime == 0) {
        formatTime.value = "0";
    } else if (totalTime <= -1) {
        formatTime.value = "未开始";
    } else {
        count = 0;
        firstTimer = new Date().getTime();
        timer = setTimeout(func, interval)
    }
}

//在开始和结束前要调接口做校对,获取剩余时长传给totalTime
startCountDown();


//暴漏给父组件的方法
defineExpose({
    stopCountDown,
    startCountDown
})


onBeforeUnmount(() => {
    clearTimeout(timer);
})
</script>
<style scoped>

</style>
